import 'package:flutter/material.dart';
import 'package:shining_red_star/widgets/shape.dart';

import '../definitions/color.dart';
import '../model/shape.dart';

class ShapePracticeOptionCard extends StatelessWidget {
  final ShapeInfo shape;
  final bool? hasFocus;

  const ShapePracticeOptionCard({
    super.key,
    required this.shape,
    this.hasFocus,
  });

  @override
  Widget build(BuildContext context) {
    String txt = '${shape.value} ${shape.pinYin}';
    return Column(
      children: [
        Expanded(
          child: Column(
            children: [
              Expanded(
                  child: Shape(
                shapeId: shape.id,
                color: shape.fillColor,
              )),
              Container(
                width: double.infinity,
                padding: const EdgeInsets.all(8),
                height: 32,
                child: Center(
                  child: Text(
                    txt,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color:
                          hasFocus == true ? SchemeColor.seedColor.value : null,
                      fontSize: 14,
                      height: 1,
                      fontFamily: 'PinYin',
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ),
              )
            ],
          ),
        )
      ],
    );
  }
}
